<style lang="less">
.cate {
    padding-top: 15px;

    .cate-title {
        color: #333;

        span {
            color: #666;
        }
    }

    .cate-header {
        margin-top: 15px;

        .el-input {
            width: 260px;
        }

        .el-button {
            margin-left: 15px;
        }
    }

    .cate-main {
        margin-top: 15px;
    }
}
</style>
<template>
    <div class="cate">
        <h3 class="cate-title">分类导航 <span>#兴趣爱好</span> </h3>
        <div class="cate-header">
            <el-input v-model="text" placeholder="请输入分类名称"></el-input>
            <el-button type="primary" plain @click="addCateFn">添加</el-button>
        </div>
        <div class="cate-main">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column align="center" label="序号" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="ID" prop="id" width="100px"></el-table-column>
                <el-table-column label="分类名称" prop="cate"></el-table-column>
                <el-table-column label="子分类" prop="cate_name"></el-table-column>
                <el-table-column align="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { Message } from "element-ui";
import { addCate, listCate , removeCate} from "../../api/index"
export default {
    data() {
        return {
            cate: "兴趣爱好",
            text: "",
            tableData: [
                // {
                //     id: 1,
                //     cate: "",
                //     cate_name: "",
                // },
            ],
        }
    },
    methods: {
        // 删除导航
        async removeCateFn(id) {
            await removeCate({id})
            .then(
                resData=>{
                    console.log(resData);
                    if(resData.code == 200){
                        Message({type:"success",message:"删除导航成功"});
                        this.listCateFn();
                    }
                }
            )
        },
        // 添加导航分类
        async addCateFn() {
            let text = this.text;
            if (text == "") {
                Message({ type: "error", message: "输入框不能为空~" })
                return false;
            }
            await addCate({
                cate: this.cate,
                cate_name: text
            })
                .then(
                    resData => {
                        // console.log(resData);
                        if (resData.code == 200) {
                            Message({
                                type: "success",
                                message: "添加导航成功"
                            })
                            // 重新获取列表
                            this.listCateFn();
                            // 重置输入框
                            this.text = "";
                        }
                    }
                )
        },
        // 导航列表
        async listCateFn() {
            await listCate()
                .then(
                    resData => {
                        // console.log(resData);
                        if (resData.code == 200) {
                            let { result } = resData;
                            let arr = result.filter(item=> {
                                return item.cate == this.cate;
                            } )
                            this.tableData = arr;
                        }
                    }
                )
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
            if(confirm("您要删除该导航吗")){
                let id = row.id;
                this.removeCateFn(id);
            }
        }
    },
    created() {
        // 初始化
        this.listCateFn();
    },
    watch: {
        $route: {
            immediate: true,
            deep: true,
            handler(newRoute) {
                // console.log(newRoute);
                this.$store.commit("addTab", newRoute);
            }
        }
    }
}

</script>